<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- Head -->

<head>
    <meta charset="utf-8" />
    <title></title>

    <div th:replace="/system/resource/base/baseHead.template"></div>
    <link rel="stylesheet" type="text/css"
        th:href="${application.resourceUrl}+'/assets/js/lightbox/css/lightbox.css'" />
    <link rel="stylesheet" type="text/css" href="https://cdn.test.bestpay.net/orange/antd.1.6.5.css" />
    <!-- <link rel="stylesheet" type="text/css" href="./antd.1.6.5.css" /> -->
    <link rel="stylesheet" type="text/css" href="https://cdn.test.bestpay.net/orange/tailwindcss@2.2.19.min.css" />
    <style>
        html {
            font-size: 14px;
        }

        .page-body {
            padding: 30px;
        }

        .ant-card {
            margin-bottom: 20px;
        }

        [v-cloak] {
            visibility: hidden;
        }

        .photoOverlay {
            opacity: 0;
        }

        .photoOverlay:hover {
            opacity: 1;
        }

        .tabelRowHeight {
            height: 100px;
        }

        .table-img {
            height: 10px;
            width: 10px;
            display: block;
            margin: auto;
        }

        .ant-form-item {
            margin-bottom: 8px;
        }

        .orderModalCnt .cell {
            display: flex;
            align-items: center;
            padding: 5px 0;
            font-size: 16px;
        }

        .orderModalCnt .title {
            width: 120px;
            text-align: right;
        }

        .orderModalCnt .cnt {
            color: #585858;
            flex: 1;
        }
        .go-goods-order{
          padding-top: 43px;
          padding-left: 15px;
        }
        .activeImage .ant-form-item-label{
          text-align: left;
        }
    </style>
</head>
<!-- /Head -->
<!-- Body -->

<body>
    <!-- 引入头部 -->
    <div th:include="/system/resource/base/baseNav.template"></div>
    <!-- /引入头部 -->
    <!-- Main Container -->
    <div class="main-container container-fluid">
        <!-- Page Container -->
        <div class="page-container">
            <!-- 引入左侧菜单 -->
            <div class="page-sidebar" id="sidebar" th:include="/system/resource/base/baseLeftMenu.template"></div>
            <!-- /引入左侧菜单 -->
            <!-- Page Content -->
            <div class="page-content">
                <!-- Page Breadcrumb -->
                <div class="page-breadcrumbs">
                    <ul class="breadcrumb"></ul>
                </div>
                <!-- /Page Breadcrumb -->
                <!-- Page Body -->
                <div id="app" class="page-body" v-cloak>
                    <div v-if="showTablePage">
                        <a-card title="用户账户-查询">
                            <a-form-model id="tableForm" :model="form" v-bind="layout">
                                <a-row :gutter="24">
                                    <a-col :span="10">
                                        <a-form-model-item label="用户ID :">
                                            <a-input v-model="form.ipRId" placeholder="请输入用户ID" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-model-item label="用户手机号 :">
                                            <a-input v-model="form.mobile" placeholder="请输入用户手机号" />
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <form id="query-form" method="post" style="display: none;">
                                    <input type="text" name="query.mobile" :value="form.mobile">
                                    <input type="text" name="query.ipRId" :value="form.ipRId">
                                </form>

                                <a-row>
                                    <a-col :span="24" :style="{ textAlign: 'center' }">
                                        <a-button type="primary" :loading="queryTableLoading" @click="onQueryTableData">
                                            查询
                                        </a-button>
                                        <a-button :style="{ marginLeft: '8px' }" @click="resetSearchFormInfo">
                                            重置
                                        </a-button>
                                    </a-col>
                                </a-row>
                            </a-form-model>
                        </a-card>
                        <a-card title="查询结果">
                            <a-button @click="onAddActivity" slot="extra" type="primary">
                                新增活动
                            </a-button>
                            <a-config-provider :locale="locales.zh_CN">

                                <a-table :columns="tableColumns" :data-source="tableData" :loading="loading"
                                    :pagination="pagination" row-key="id" :scroll="tableScroll" bordered
                                    size="small" @change="handleTableChange">
                                    <template slot="action" slot-scope="text, record, index">
                                        <a-button type="primary" @click="showDetailDialog(record)">详情</a-button>
                                    </template>
                                </a-table>
                            </a-config-provider>
                        </a-card>
                    </div>
                    <div v-else>
                        <a-form-model ref="ruleForm" :model="dialogForm">
                            <a-card title="订单详情">

                              <a-row>
                                <h3>用户信息：</h3>
                              </a-row>
                              
                              <a-row :gutter="24">
                                <a-col :span="1"></a-col>
                                <a-col :span="7">
                                    <a-form-model-item label="用户姓名 :">
                                        <a-input :disabled="dialogFormDisabled" v-model="dialogForm.userName" />
                                    </a-form-model-item>
                                  </a-col>
                                  <a-col :span="1"></a-col>
                                  <a-col :span="7">
                                    <a-form-model-item label="用户ID :">
                                        <a-input :disabled="dialogFormDisabled" v-model="dialogForm.ipRId" />
                                    </a-form-model-item>
                                  </a-col>
                                  <a-col :span="1"></a-col>
                                  <a-col :span="7">
                                    <a-form-model-item label="用户手机号 :">
                                        <a-input :disabled="dialogFormDisabled" v-model="dialogForm.mobile" />
                                    </a-form-model-item>
                                  </a-col>
                                </a-row>


                              <a-row :gutter="24">
                                <a-col :span="1"></a-col>
                                <a-col :span="7">
                                    <a-form-model-item label="可提现金额 :">
                                        <a-input :disabled="dialogFormDisabled" v-model="dialogForm.canWithdrawAmount" />
                                    </a-form-model-item>
                                  </a-col>
                                  <a-col :span="1"></a-col>
                                  <a-col :span="7">
                                    <a-form-model-item label="已提现金额 :">
                                        <a-input :disabled="dialogFormDisabled" v-model="dialogForm.totalDisburse" />
                                    </a-form-model-item>
                                  </a-col>
                                  <a-col :span="1"></a-col>
                                  <a-col :span="7">
                                    <a-form-model-item label="总收入金额 :">
                                        <a-input :disabled="dialogFormDisabled" v-model="dialogForm.totalIncome" />
                                    </a-form-model-item>
                                  </a-col>
                                </a-row>


                                <a-row :gutter="24">
                                  <a-col :span="1"></a-col>
                                  <a-col :span="7">
                                      <a-form-model-item label="剩余金额 :">
                                          <a-input :disabled="dialogFormDisabled" v-model="dialogForm.totalAmount" />
                                      </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                      <a-form-model-item label="剩余积分 :">
                                          <a-input :disabled="dialogFormDisabled" v-model="dialogForm.totalGoldCoin" />
                                      </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                      <a-form-model-item label="创建时间 :">
                                          <a-input :disabled="dialogFormDisabled" v-model="dialogForm.createdAt" />
                                      </a-form-model-item>
                                    </a-col>
                                  </a-row>

                                <a-row type="flex" justify="center">
                                  <!-- v-if="isEdit || !dialogFormDisable"  -->
                                    <a-button size="large"   type="primary" :loading="editBtnLoading"
                                    @click="onSubmit(true)">
                                        确认
                                    </a-button>
                                    <a-button @click="dialogButtonClick(false)" size="large" >
                                        返回
                                    </a-button>
                                </a-row>
                            </a-card>
                        </a-form-model>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Body -->
    </div>
    <!-- /Page Content -->
    <div th:replace="/system/resource/base/baseFoot.template"></div>

    <script
        th:src="${application.resourceUrl}+'/assets/js/datatable/jquery.dataTables.min.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/datatable/dataTables.tableTools.min.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/datatable/dataTables.bootstrap.min.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/datatable/DT_bootstrap.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/validation/bootstrapValidator.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/validation/bootstrapValidator_zh_CN.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/validator/bootstrapValidator-extend.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/datatable/datatable_client.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/datatable/datatable_server.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/bboss/js/form/form.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/assets/js/select2/select2.min.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/bboss/js/select2/selectTab.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/bboss/js/dialog/dialog-page.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/dialog/bboss-dialog-page.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/jquery-file-upload/js/vendor/jquery.ui.widget.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/jquery-file-upload/js/jquery.iframe-transport.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/jquery-file-upload/js/jquery.fileupload.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/assets/js/lightbox/js/lightbox.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/upload/bboss-fileUpload.js?'+${application.JSVERSION}"></script>

    <script src="https://cdn.test.bestpay.net/orange/moment-with-locales.min.js"></script>
    <script src="https://cdn.test.bestpay.net/orange/vue.2.6.9.js"></script>
    <script src="https://cdn.test.bestpay.net/orange/antd.1.6.5.js"></script>
    <script src="https://cdn.test.bestpay.net/orange/axios.0.20.0.js"></script>
    <script src="https://cdn.test.bestpay.net/orange/antd-with-locales.1.6.5.js"></script>
    <script src="https://h5.test.bestpay.net/subapps/bboss/bboss/js/export/export-base.js?1.0.0"></script>

    <!--Page Related Scripts-->
    <script th:inline="javascript">
        function jsonSecurity (url) {
            url = url.replace(/\\/g, "@@"); //反斜杠转换为@@
            url = url.replace(/\$/g, "--"); //$符转换为--
            url = url.replace(/\|/g, "^^"); //竖杠转换为^^
            url = url.replace(/%/g, "!!");  //%转换为!!
            url = url.replace(/\"/g, "=="); //双引号转换为==
            url = url.replace(/\'/g, "**"); //单引号转换为**
            return url;
        };

        const http = axios.create({
            timeout: 5000, // 请求超时时间
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            transformRequest: [function (data) {
                let ret = ''
                for (let it in data) {
                    if (typeof data[it] === 'string') {
                        ret += encodeURIComponent(it) + '=' + jsonSecurity(data[it]) + '&'
                    } else {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                }
                return ret
            }],
        });

        http.interceptors.response.use(response => {
            return response.data;
        });

        function getBase64 (file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
            });
        }
        const { locales } = window.antd;
         /** 表格数据列配置 */
        const tableColumns = [
            {
                title: '用户ID',
                dataIndex: 'ipRId',
                align: 'center',
            },
            {
                title: '用户姓名',
                dataIndex: 'userName',
                align: 'center',
            },
            {
                title: '用户手机号',
                dataIndex: 'mobile',
                align: 'center',
            },
            {
                title: '总收入金额',
                dataIndex: 'totalIncome',
                align: 'center',
            },
            {
                title: '可提现金额',
                dataIndex: 'canWithdrawAmount',
                align: 'center',
            },
            {
                title: '剩余金额',
                dataIndex: 'totalAmount',
                align: 'center',
            },
            {
                title: '剩余积分',
                dataIndex: 'totalGoldCoin',
                align: 'center',
            },
            {
                title: '已提现金额',
                dataIndex: 'totalDisburse',
                align: 'center',
            },
            {
                title: '操作',
                align: 'center',
                dataIndex: 'action',
                fixed: 'right',
                width:  200,
                scopedSlots: { customRender: 'action' },
            }
        ]

        const EditableCell = {
            template: `
          <div class="editable-cell">
            <div v-if="editable" class="flex justify-center items-center">
              <a-input :value="value" @change="handleChange" @pressEnter="check" />
              <a-icon type="check" class="ml-2" @click="check" />
            </div>
            <div v-else class="relative flex justify-center items-center px-8">
              {{ value || ' ' }}
              <a-icon v-if="!disableEdit" type="edit" class="absolute right-1 top-1/4" @click="edit" />
            </div>
          </div>
        `,
            props: {
                text: String,
                disableEdit: Boolean,
            },
            data () {
                return {
                    value: this.text,
                    editable: false,
                };
            },
            methods: {
                handleChange (e) {
                    const value = e.target.value;
                    this.value = value;
                },
                check () {
                    this.editable = false;
                    this.$emit('change', this.value);
                },
                edit () {
                    this.editable = true;
                },
            },

        };
        moment.locale('zh-cn');
        var vm = new Vue({
            el: '#app',
            components: {
                EditableCell,
            },
            data: {
                editBtnLoading: false,
                dialogFormRules: {
                    merchantName: [{ required: true, message: '请输入商家名称!', trigger: 'blur' }],
                    activityPeriod: [{ required: true, message: '请选择是否开商户!', trigger: 'change' },],
                    merchantNo: [{ required: true, message: '请输入商家商户ID!', trigger: 'blur' }],

                },
                dialogFormDisabled: true,
                tableDetailColumns: [] ,
                tableScroll :{x:document.body.clientWidth * 0.8 },
                queryTableLoading: false,
                /** 展示 table 页面 */
                showTablePage: true,
                // table 数据
                /** 搜索栏样式配置 */
                layout: {
                    labelCol: { span: 7 },
                    wrapperCol: { span: 17 },
                },
                /** 搜索栏数据 */
                form: {
                  // 手机号
                  mobile: '',
                  // 用户号
                  ipRId: '',
                  // 订单流水号
                  capitalBillNo: '',
                },
                // 活动周期  1单次 2不限次
                activityPeriodList: [
                  {
                    label: '单次',
                    value: '1',
                  },
                  {
                    label: '不限次',
                    value: '2',
                  },
                ],
                /** 分页器 */
                pagination: {
                    showSizeChanger: true,
                    showQuickJumper: true,
                    total: null,
                    pageSize: 10,
                    current: 1,
                    showTotal: (total, range) => `共${total}条`,
                    pageSizeOptions: ['10', '25', '50', '100'],
                    buildOptionText: (size) => {
                        return `${size.value}条/页`
                    }
                },
                /** 表格分页数据查询中标识位 */
                loading: false,
                /** 表格数据 */
                tableData: [],
                dialogFormTemp: {
                  // 用户Id
                  ipRId: '',
                  // 手机号
                  mobile: '',
                  // 用户名
                  userName: '',
                  // 收入总金额
                  totalIncome: '',
                  // 可提现金额
                  canWithdrawAmount: '',
                  // 剩余金额
                  totalAmount: '',
                  // 剩余积分
                  totalGoldCoin: '',
                  // 已提现金额
                  totalDisburse: '',
                  // 创建时间
                  createdAt: '',
                },
                dialogForm: {
                },
                orderModalInfo: {}
            },
            mounted: function () {
                this.dialogForm = this.dialogFormTemp
                this.queryTableData();
            },
            methods: {
                /** 浏览图片 */
                catPhoto(url){
                  console.log("浏览图片" , url)
                  // position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);max-width: 85vw;max-height: 85vh;
                  let imgDom = "<div style='width: 100vw;position: fixed;left: 0;top: 0;z-index: 9999;height: 100vh;background: rgba(0,0,0,0.6);' >"
                  imgDom += "<img src='" + url + "' style='position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);max-width: 85vw;max-height: 85vh;' ></img>"
                  imgDom += "</div>"
                  const PicDom = $(imgDom)
                  $("body").append( PicDom )
                  PicDom.click(function(){
                    $(this).remove();
                  });
                  
                },
              
                /** 上传照片处理 */
                photoInputChange (type) {
                  const reader = new FileReader();
                  const file = this.$refs[`${type}PhotoInput`].files[0];
                  if (!file) {
                    return;
                  }

                  reader.readAsDataURL(file);
                  reader.onload = async (e) => {
                    const url = '/PF/service/fastDfsServer/upload.upload';
                    const form = new FormData();
                    form.append('file', file);
                    form.append('attachPath1', file.name.split('.')[1]);

                    // 调用图片上传接口
                    const res = await axios.post(url, form).finally(() => {
                      this.$refs[`${type}PhotoInput`].value = '';
                    });
                    const { success, result, errorMsg } = JSON.parse(res.data);
                    console.log(result, '图片上传接口');
                    if (!success) {
                      this.$message.error(errorMsg);
                      return;
                    }
                    this.dialogForm[`${type}PhotoImgList`] = [{
                      pictureUrl: result.fileUrl,
                      fileGroup: result.fileGroup,
                      fileName: result.fileName,
                    }];
                  }
                },
                
                // 新增活动
                onAddActivity(){
                  
                  this.dialogForm = { ...this.dialogFormTemp };
                  this.showTablePage = false
                },
                goGoodsOrder(options){
                  console.log("options" , options)
                  const spuId = options.commodityVOs.spuId
                  const orderNo = options.commodityOrderVO.orderNo
                  location.href = location.origin + '/PF/page/mallOrderService/queryPage.html?spuId='+spuId+'&orderNo='+orderNo
                },
                /** 配置窗口按钮点击 */
                async dialogButtonClick (flag) {
                    // 取消按钮直接重新展示table
                    if (!flag) {
                        this.showTablePage = true;
                        return;
                    }
                },
                onSubmit(){

                  console.log("this.dialogForm" , this.dialogForm)
                  // 新增全部校验
                  this.$refs.ruleForm.validate(async valid => {
                    if (valid) {
                      // this.onSubmitXhr()

                      // activityStartTime: (this.form.activityTime && this.form.activityTime[0]) && moment(this.form.activityTime[0]).format('YYYY-MM-DD') + " 00:00:00",
                        // activityEndTime: (this.form.activityTime && this.form.activityTime[1]) && moment(this.form.activityTime[1]).format('YYYY-MM-DD') + " 23:59:59",
                    } else {
                      console.log('error submit!!', valid);

                      this.$message.error("表单校验出错，请校验表单");
                      return false;
                    }
                  });
                },
                onQueryTableData(){
                  this.pagination.current = 1
                  this.queryTableData()
                },
                /** 查询表格数据 */
                async queryTableData () {
                    console.log('查询表格数据');
                    // 组装表格查询参数
                    const searchTableDataParams = {
                        ...this.form,
                        size: this.pagination.pageSize,
                        current: this.pagination.current,
                        mobile: this.form.mobile,
                        activityStartTime: (this.form.activityTime && this.form.activityTime[0]) && moment(this.form.activityTime[0]).format('YYYY-MM-DD') + " 00:00:00",
                        activityEndTime: (this.form.activityTime && this.form.activityTime[1]) && moment(this.form.activityTime[1]).format('YYYY-MM-DD') + " 23:59:59",
                    }
                    delete this.form.activityTime
                    // delete searchTableDataParams.mobile;
                    for (let key in searchTableDataParams) {
                        if (!searchTableDataParams[key]) {
                            delete searchTableDataParams[key]
                        }
                    }
                    console.log('表格查询参数', searchTableDataParams);
                    // 数据查询
                    const url = '/PF/service/excellentBlindBoxOrderService/blindBoxOrderQuery.do';
                    this.queryTableLoading = true
                    const { success, result, errorMsg } = await http.post(url, searchTableDataParams);
                    this.queryTableLoading = false
                    console.log(result, '查询表格数据');
                    if (!success) {
                        this.$message.error(errorMsg);
                        return;
                    }
                    for (let i = 0; i < result.records.length; i++) {
                        result.records[i].payAmount = result.records[i].payAmount / 100;
                    }
                    this.pagination.total = result.total,

                        this.tableData = result.records;
                },
                // 导出
                onExport () {
                  // /PF/service/excellentBlindBoxOrderService/blindBoxOrderExport.do
                    const exportParams = [
                        {
                            "name": "targetFunctionId",
                            "value": "PF#service#excellentBlindBoxOrderService#blindBoxOrderExport#do",
                        },
                        {
                            "name": "fileCode",
                            "value": "blindBoxOrderRecordExport",
                        },
                    ];
                    if (this.form.activityTime && this.form.activityTime[0]) {
                        $('#hiddenForm-startTime').val(moment(this.form.activityTime[0]).format('YYYY-MM-DD HH:mm:ss'))
                    }
                    if (this.form.activityTime && this.form.activityTime[1]) {
                        $('#hiddenForm-endTime').val(moment(this.form.activityTime[1]).format('YYYY-MM-DD HH:mm:ss'))
                    }
                    const exportObj = new $.bboss.export.init(
                        'export',
                        'query-form',
                        'dataList',
                        'template-blindBoxOrderRecordExport.xlsx',
                        '盲盒订单记录.xls',
                        2000,
                        2000,
                        window,
                        WWWROOT + "/PF/resource/excellentBlindBoxOrderService/export.download",
                        null,
                        exportParams,
                    );
                    exportObj.initForm();
                    exportObj.startExport();
                },
                /** 重置搜索查询条件 */
                resetSearchFormInfo () {
                    this.form = {};
                    console.log('重置搜索查询条件');
                },
                /** 分页器事件处理 */
                handleTableChange (pagination) {
                    // 设置分页器数据
                    this.$set(this, 'pagination', pagination);
                    // 查询 table 数据
                    this.queryTableData();
                },
                /** 展示详情弹窗 */
                async showDetailDialog (record) {

                    // 通过接口查询已配置商品信息
                    const url = '/PF/service/excellentBlindBoxOrderService/blindBoxOrderDetailQuery.do';
                    const params = {
                      subOrderNo: record.subOrderNo,
                    };
                    console.log(params, '查询已配置商品信息参数');
                    const { success, result, errorMsg } = await http.post(url, params);
                    console.log(result, '查询已配置商品信息');
                    if (!success) {
                        this.$message.error(errorMsg);
                        return;
                    
                    };
                    this.dialogForm = { ...this.dialogFormTemp };
                    // 清空一下搜索条件，方便新增或修改后再次查询内容
                    // this.resetSearchFormInfo(); 
                    this.showTablePage = false;
                },
            },
        });
    </script>
</body>
<!--  /Body -->

</html>